<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习：1.圆形   2.正三角形
			思路1：框高于边框倒角一致
			思路2：div#triangle
			            css中：抓到div  【斜线】
			               左边框: 50像素实线红色
                           右边框: 50像素实线黄色
                           下边框: 50像素实线黑色
             注意:先别加宽高  transparent 透明色
		    */
			div#circle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 5px red;
			}
			/* 思路2：div#triangle
			            css中：抓到div  【斜线】
			               左边框: 50像素实线红色
			               右边框: 50像素实线黄色
			               下边框: 50像素实线黑色
			 注意:先别加宽高  transparent 透明色 */
			 div#triangle{
				 width: 0;
				 border-left: 50px solid transparent;
				 border-right: 50px solid transparent;
				 border-bottom: 50px solid black;
				 /* 两行：倒三角，蓝色，透明度 .3 
				    上边框颜色改为蓝色  0，0，225
				 */
				border: 50px solid transparent;
				border-top-color: rgba(85, 255, 127, 0.3);
			 }
			 /* outline  边框轮廓  只针对inout 元素 */
			 input{
				 outline: 1px solid red;
			 }
			 /* 实际应用：通配选择器 去掉轮廓 
			 *{outline: 0;}
			 
			 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input tyle="text">
	</body>
</html>